<template>
    <section :class="cname">
        <swiper :options="options">
            <swiper-slide v-for="item in items" :key="item.href">
                <router-link :to="{ name: item.href }">
                    <img :src="item.src" alt="">
                </router-link>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </section>
</template>


<script>
// 应用轮播图插件
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper';
import "swiper/css/swiper.css";

export default {
    props: {
        cname: {
            type: String,
            default: "",
        },
        options: {
            type: Object,
            default() {
                return {
                    autoplay:true,
                    pagination: {
                        el: ".swiper-pagination",
                    },
                }
            }
        },
        items: {
            type:Array,
            default() {
                return []
            }
        }
    },
    // 注册swiper组件
    components: {
        Swiper,
        SwiperSlide
    },
    directives: {
        swiper: directive
  }
}
</script>